<template>
  <div class="relative w-full min-h-screen overflow-hidden">
    <BackgroundParticle
      :quantity="50"
      color="#ff0000"
      class="absolute inset-0 z-0 border-4 border-red-500 bg-blue-200"
    ></BackgroundParticle>

    <!-- 内容层 -->
    <div class="home-container relative z-10">
      <header class="nav-bar">
        <h1>测试背景组件显示</h1>
      </header>

      <!-- 简单内容用于测试 -->
      <div class="p-8">
        <p>如果能看到红色边框的蓝色背景，说明组件已加载</p>
        <p>如果看不到，说明组件未正确加载</p>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import BackgroundParticle from '../components/BackgroundParticle.vue'
</script>
